<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
    <meta name="format-detection" content="telephone=yes"/>
    <title>个人信息</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/personal.css">
    <style>



    </style>
</head>
<body>
<div class="wrapper">
    <!--<div class="top_2">-->
        <!--<ul>-->
            <!--<li onclick="ret()"><img src="../../images/Artboard@2x.png" alt=""></li>-->
            <!--<li >个人信息</li>-->
        <!--</ul>-->
    <!--</div>-->
    
    <div class="per-top-box b-btm b-top">
        <div class="con4">
            <span class="btn upload">头像<input type="file" class="upload_pic" id="upload" /></span>
            <img class="cvs-img" src="../../images/Artboard%2015@3x.png" alt="">
            <canvas id="cvs"></canvas>
        </div>
         </div>
         <div class="con3 b-top">
            <div class="per-name">
                <span>真实姓名</span>
                <span class="name-sp">DEMO</span>
            </div>
             <div class="b-top">
                 <div class="per-name">
                     <span>HOLO账号</span>
                     <span class="name-sp">demo</span>
                 </div>
             </div>
         </div>
    </div>
    <div class="id-name b-top">
        <div class="b-top">
            <div class="per-name">
                <span>身份证号</span>
                <span class="name-sp">2345734687567256</span>
            </div>
        </div>
        <div class="b-top">
            <div class="per-name">
                <span>银行卡号</span>
                <span class="name-sp"><input type="button" class="yin-inp" id="card" value="请输入卡号"><img class="yin-more" src="../../images/Artboard%2013@3x.png" alt=""></span>
            </div>
        </div>
        <div class="b-top">
            <div class="per-name">
                <span>开户行</span>
                <span class="name-sp"><input type="button" class="yin-inp" id="card-st" value="请输入卡的开户行"><img class="yin-more" src="../../images/Artboard%2013@3x.png" alt=""></span>
            </div>
        </div>
        <div class="b-top">
            <div class="per-name">
                <span>邮箱</span>
                <span class="name-sp"><input type="button" class="yin-inp" id="mail" value="请输入邮箱"><img class="yin-more" src="../../images/Artboard%2013@3x.png" alt=""></span>
            </div>
        </div>
    </div>
    <div class="background hide1">
        <div class="card hide1">
            <span class="card-sp f1 fz11 dis_b b-btm">请修改银行卡号</span>
            <div class="card-div">
                <input class="card-inp1 dis_b f1 fz11" id="card-num" type="number" placeholder="请输入银行卡号">
                <span class="card-sp1 "> <img src="../../images/Artboard 101.png" alt=""></span>
            </div>
            <input class="card-inp2 dis_b" type="button" onclick="card()" value="保存">
        </div>
        <div class="card-st hide1">
            <span class="card-sp f1 fz11 dis_b b-btm">请修改开户行</span>
            <div class="card-div">
                <input class="card-inp1 dis_b f1 fz11" id="card-ard" type="number" placeholder="请输入开户行">
                <span class="card-sp1 "> <img src="../../images/Artboard 101.png" alt=""></span>
            </div>
            <input class="card-inp2 dis_b" type="button" onclick="card1()" value="保存">
        </div>
        <div class="mail hide1">
            <span class="card-sp f1 fz11 dis_b b-btm">请修改邮箱</span>
            <div class="card-div">
                <input class="card-inp1 dis_b f1 fz11" type="email" name="user_email" id="mail-num" placeholder="请输入邮箱">
                <span class="card-sp1 "> <img src="../../images/Artboard 101.png" alt=""></span>
            </div>
            <input class="card-inp2 dis_b" type="submit" onclick="card2()" value="保存">
        </div>
    </div>
    <div class="prompt_box hide1" id="error">
        <span class="prompt_span" id="errmsg">shusdjad</span>
    </div>
</div>
<script src="../../js/jquery-2.1.4.min.js"></script>
<script src="../../js/personal.js"></script>
<script>
    //获取上传按钮
    var input1 = document.getElementById("upload");

    if(typeof FileReader==='undefined'){
        //result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        input1.setAttribute('disabled','disabled');
    }else{
        input1.addEventListener('change',readFile,false);

    }
    function readFile(){
        var file = this.files[0];//获取上传文件列表中第一个文件
        if(!/image\/\w+/.test(file.type)){
            alert("文件必须为图片！");
            return false;
        }
        // console.log(file);
        var reader = new FileReader();//实例一个文件对象
        reader.readAsDataURL(file);//把上传的文件转换成url
        reader.onload = function(e){

          $('.cvs-img').css('display','none');
            var image = new Image();
            // 设置src属性
            image.src = e.target.result;
            var max=300;
            // 绑定load事件处理器，加载完成后执行，避免同步问题
            image.onload = function(){
                var canvas = document.getElementById("cvs");
                var ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(image, 0, 0, 300, 300);
            };
        }
    };


</script>
</body>
</html>